<template>
  <zm-app-content class="app-container">
    <template v-if="step === 1">
      <div class="card-content flex-1" :class="[cardType]">
        <div class="card-img mb20 tc">
          <!-- <img class="extend" :src="cardImg[cardType]" :alt="cardType" :title="cardType" /> -->

          <zm-icon :icon-class="cardType"></zm-icon>
        </div>
        <div class="desc-1 mb30">
          {{ +info.status === 2 ? i18n.validBankApp : i18n.paymentProcessing }}
        </div>
        <van-loading v-if="+info.status !== 2" size="50px" vertical color="#333"></van-loading>
      </div>
      <div class="footer-desc fs14 fc-6">{{ i18n.loadingPageNotice }}</div>
    </template>
    <send-code
      v-if="step === 2"
      :card-img="cardImg"
      :info="info"
      :isLoading="isLoading"
      :cardType="cardType"
      @after-submit="submitCode"
    ></send-code>
    <van-dialog
      v-model="showRes"
      :title="!isSuccess ? i18n.sendCode.failedTitle : i18n.sendCode.successTitle"
      @confirm="confirm"
      @close="confirm"
      confirm-button-text="OK"
      :confirm-button-color="isSuccess ? '#4fc08d' : '#ee0a24'"
    >
      <!-- <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" /> -->
      <div class="tc">
        <div class="tip-dialog">
          <div class="tip-icon" :style="{ color: isSuccess ? '#4fc08d' : '#ee0a24' }">
            <zm-icon icon-class="success" v-if="isSuccess"></zm-icon>
            <zm-icon icon-class="wrong" v-if="!isSuccess"></zm-icon>
          </div>
        </div>
        <div class="tip-desc fs12 mb10">{{ !isSuccess ? i18n.sendCode.failedTip : i18n.sendCode.successTip }}</div>
      </div>
    </van-dialog>
  </zm-app-content>
</template>

<script>
import visa from '@/assets/images/visa-1.png';
import mastercard from '@/assets/images/master-1.png';
import discover from '@/assets/images/discover-1.png';
import american from '@/assets/images/american-1.jpg';
import i18n from './const.js';
import { getTopLevelDomain, findCardType } from './const.js';
import SendCode from './components/SendCode.vue';
import order from '@/api/src/order';

export default {
  name: 'VerifyCode',
  components: { SendCode },
  props: {},
  data() {
    return {
      showRes: false,
      isFetched: false,
      dialogFlag: false,
      textFlag: false,
      step: 1,
      cardType: 'visa',
      isSuccess: false,
      isLoading: false,
      timer: null,
      i18n,
      info: { status: 1 },
      cardImg: {
        visa,
        discover,
        'american-express': american,
        mastercard
      }
    };
  },
  computed: {},
  watch: {},
  beforeRouteLeave(to, from, next) {
    this.stopPolling();
    // this.leavePage();
    next();
  },
  beforeDestroy() {
    this.stopPolling();
    // this.leavePage();
  },
  created() {
    this.cardType = this.$route.query.cartType;
  },
  mounted() {
    // window.addEventListener('beforeunload', async function (event) {
    //   // 返回一个非空字符串会触发浏览器的确认对话框
    //   await this.leavePage();
    //   event.preventDefault(); // 这在某些旧浏览器中可能需要，但现代浏览器可能忽略
    //   return 'confirm leave?';
    // });
    // window.addEventListener('unload', function (event) {
    //   // 这里执行一些简单的清理操作，但不能阻止页面关闭
    //   this.leavePage();
    // });
    this.startPolling();
  },
  methods: {
    // async leavePage() {
    //   await order.out3dpage({ ...this.$route.query });
    // },
    async stopPolling() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    async startPolling() {
      this.isFetched = false;
      this.getOrderStatus();
      // 设定轮询间隔，例如每5秒轮询一次
      const interval = 2000;
      this.timer = setInterval(() => {
        this.getOrderStatus();
      }, interval);
    },
    async getOrderStatus() {
      // id orderId
      const res = await order.getOrderStatus({ ...this.$route.query });
      this.isFetched = true;
      this.info = { ...res.data, status: +res.data.status };
      // console.log(findCardType(res.data.cardType.split(',')[0]));
      if (!this.$route.query.cartType) {
        this.cardType = findCardType(res.data.cardType.split(',')[0]);
      }
      // this.info.status = 2;
      const { status, wait } = this.info;
      // if (+status === 150) {
      //   this.isLoading = true;
      // } else {
      //   this.isLoading = false;
      // }
      this.isLoading = !!+wait;
      if (status === 200 || status === 15) {
        const topDomain = getTopLevelDomain(window.location.href);
        window.location.href = `//${topDomain}/checkout/order-received/${this.$route.query.orderId}/?key=${res.data.wpKey}`;
      } else if (status === 2) {
        this.step = 1;
      } else if ([5, 3, 7, 9].includes(status)) {
        this.step = 2;
      } else if ([101, 100, 0, 20].includes(status)) {
        // if(!this.dialogFlag){
        //   this.dialogFlag = true
        this.stopPolling();
        this.showRes = true;
        // }
      }
    },
    submitCode() {
      this.isLoading = true;
    },
    confirm() {
      const topDomain = getTopLevelDomain(window.location.href);
      window.location.href = `//${topDomain}/checkout/#cfw-payment-method`;
      this.dialogFlag = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.tip-dialog {
  background: #fff;
  border-radius: 10px;
  .tip-icon {
    font-size: 55px;
  }
}
.app-container {
  display: flex;
  flex-direction: column;
  padding: 15px;
  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .desc-1 {
      font-weight: bold;
    }
  }
}
.card-img {
  // width: 200px;
  position: relative;
  &:after {
    content: '';
    display: block;
    background: #ffffff;
    height: 100%;
    position: absolute;
    box-shadow: 0 0 18px 6px #fff;
    top: 0;
    left: 0px;
    animation: 4s move infinite linear;
  }
}
@keyframes move {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  to {
    left: 0;
  }
}
</style>
